<template>
  <div class="login-wrapper">
    <div class="login-bg">
      <div class="login-carousel">
        <a-carousel :dots="false" :autoplay="true">
          <div class="login-img">
            <img src="/images/column-1.png" alt="" />
          </div>
          <div class="login-img">
            <img src="/images/column-2.png" alt="" />
          </div>
          <div class="login-img">
            <img src="/images/laboratory-2.png" alt="" />
          </div>
        </a-carousel>
      </div>
    </div>
    <div class="login-box">
      <div class="login-title">
        欢迎登录

        <div class="go-home" @click="router.push('/index')">
          <img src="@/assets/icon-links.png" class="icon" />
          返回首页
        </div>
      </div>

      <div class="login-sub-title">
        <div class="title-text">支持账号密码登录/微信扫码登录</div>
        <div class="sub-link" @click="handleToRegist">学生账号激活</div>
      </div>
      <div class="login-tab">
        <div
          class="tab-item"
          :class="{ cur: loginType == 0 }"
          @click="handleTab(0)"
        >
          账号密码
        </div>
        <div
          class="tab-item"
          :class="{ cur: loginType == 1 }"
          @click="handleTab(1)"
        >
          微信扫码
        </div>
      </div>
      <div class="login-form" v-if="loginType == 0">
        <a-form
          ref="loginFormRef"
          :label-width="0"
          autocomplete="off"
          :model="loginForm"
          :rules="rules"
        >
          <a-form-item has-feedback class="form-item" name="user_name">
            <img src="@/assets/icon-phone.png" class="form-icon" />

            <a-input
              :bordered="false"
              v-model:value="loginForm.user_name"
              clearable
              placeholder="请输入账号"
            >
            </a-input>
          </a-form-item>
          <a-form-item class="form-item" name="password">
            <img src="@/assets/icon-password.png" class="form-icon" />
            <a-input
              :bordered="false"
              type="password"
              v-model:value="loginForm.password"
              placeholder="请输入密码"
            >
            </a-input>
          </a-form-item>
          <div class="flex">
            <a-form-item class="form-item" name="captcha">
              <img src="@/assets/icon-code.png" class="form-icon" />
              <a-input
                :bordered="false"
                v-model:value="loginForm.captcha"
                clearable
                placeholder="请输入验证码"
              />
            </a-form-item>
            <div class="code-box">
              <img :src="codeImg" class="code" @click="handleChageCode" />
            </div>
          </div>

          <div class="form-xiyi">
            <div class="xiyi-left">
              <a-checkbox v-model:checked="agree">登录即同意</a-checkbox>
              <a href="#" class="link">《隐私安全协议》</a>
            </div>
            <div class="xiyi-right" @click="handleForget">忘记密码?</div>
          </div>
          <a-button theme="primary" class="form-btn" @click="handleLoginSubmit"
            >立即登录</a-button
          >
        </a-form>
      </div>
      <div class="login-wechat" v-else>
        <!-- <img id="wxlogin" src="" class="wechat-code" alt="" /> -->
        <div id="wxlogin" src="" class="wechat-code" alt="" />
      </div>

      <div class="copyright">
        <div class="text">Copyright © 2025</div>
        <div class="text">
          天津良益科技股份有限公司版权所有 | 津ICP备2025035260号-1
        </div>
      </div>
    </div>
    <forget-form></forget-form>
    <forget-wx></forget-wx>
    <fortget-tip v-model:value="isShowForgetTip"></fortget-tip>
    <permission></permission>
  </div>
</template>
<script setup>
import api from "@/api";
import API from "@/api/system";
import { setAuth } from "@/utils/auth";
import { message } from "ant-design-vue";
import { computed, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import forgetForm from "./compnents/forgetForm.vue";
import forgetWx from "./compnents/forgetWx.vue";
import fortgetTip from "./compnents/fortgetTip.vue";
import permission from "./compnents/permission.vue";
const router = useRouter();
const loginType = ref(0);
//切换登录方式
const handleTab = (type) => {
  loginType.value = type;
  if (type === 1) {
    initWeixinLogin();
  }
};
//登录表单数据
const loginForm = ref({
  user_name: "",
  password: "",
  captcha: "",
});
//表单验证规则
const rules = ref({
  user_name: [
    { required: true, message: "请输入用户名", trigger: "change" },
    { min: 3, max: 12, message: "长度在 3 到 12 个字符" },
  ],
  password: [{ required: true, message: "请输入密码", trigger: "change" }],
  captcha: [
    { required: true, message: "请输入验证码", trigger: "change" },
    { min: 4, max: 4, message: "长度为4位字母或数字" },
  ],
});
const isShowForgetTip = ref(false);
const handleForget = () => {
  isShowForgetTip.value = true;
};
//验证码
const showCode = ref(true);
// const codeImg = ref("");
const timestamp = ref(new Date().getTime());
const codeImg = computed(
  () =>
    import.meta.env.VITE_API_URL +
    "/api/User/GifHybridCode" +
    "?timestamp=" +
    timestamp.value
);
const handleChageCode = () => (timestamp.value = new Date().getTime());
//表单登录
const loginFormRef = ref();
const agree = ref(true);
const handleLoginSubmit = async () => {
  loginFormRef.value
    .validate()
    .then(async () => {
      if (agree.value) {
        console.log("values", loginForm.value);
        const args = { ...loginForm.value, timestamp: timestamp.value };

        console.log("🚀 ~ .then ~ args:", args);
        let res = await API.Login(args);
        if (res.accessToken) {
          localStorage.setItem("token", res.accessToken);
          let info = await API.MyProfile();
          if (info.enabled == false) {
            message.error("账号已被禁用");
            localStorage.removeItem("token");
             handleChageCode();
            return;
          }
          let userInfo = await API.UserFetchModel({ user_id: info.user_id });
          console.log(1111, info);

          message.success("登录成功");
          localStorage.setItem("userInfo", JSON.stringify(userInfo));
          await setAuth(info.user_type_id);

          router.push("/");
        } else {
          handleChageCode();
          message.error(res);
        }
      } else {
        message.error("请先同意用户协议");
      }
    })
    .catch((error) => {
      handleChageCode();
      console.log("error", error);
    });
};
const handleToRegist = () => {
  router.push("/register");
};
onMounted(async () => {
  handleChageCode();
});
const initWeixinLogin = () => {
  api.apiUserArgsForLoginByWeixinPost().then((res) => {
    console.log(res.data);

    const appId = res.data.appId;
    const state = res.data.state ?? "";
    const redirect_uri = encodeURIComponent(
      "https://lib.fantasy-lab.com/api/User/HandleLoginByWeixinCode"
    );
    // const redirect_uri = "https://lib.fantasy-lab.com";
    console.log("🚀 ~ initWeixinLogin ~ redirect_uri:", redirect_uri);

    //微信登录
    var obj = new WxLogin({
      self_redirect: false,
      id: "wxlogin",
      appid: appId,
      scope: "snsapi_login",
      redirect_uri: redirect_uri,
      state: state,
      // style: "white",
      onReady: function (isReady) {
        console.log(isReady);
      },
    });
  });
};
</script>
<style lang="less" scoped>
.login-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(180deg, #e9f2ff 0%, #eef6ff 100%);
  .login-bg {
    width: calc(100% - 580px);
    box-sizing: border-box;
    height: 100%;
    background: #d2e6ff;
    .login-carousel {
      width: 100%;
      height: 100%;
      overflow: hidden;
      /deep/ .slick-slide {
        text-align: center;
        height: 100vh;
        line-height: 160px;
        overflow: hidden;

        display: flex;
        align-items: center;
      }
      .login-img {
        width: 100%;
        height: 100%;
        padding: 50px;
        box-sizing: border-box;
        img {
          width: 100%;
        }
      }
    }
  }
  .login-box {
    width: 580px;
    border-left: 1px dashed #e5e5e5;
    padding: 70px;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .login-title {
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 30px;
      color: #111a34;
      line-height: 42px;
      margin-bottom: 8px;
      position: relative;
      .go-home {
        position: absolute;
        top: 8px;
        display: flex;
        align-items: center;
        right: 0px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 18px;
        color: #2776ff;
        cursor: pointer;
        line-height: 20px;
        .icon {
          width: 16px;
          height: 16px;
          transform: rotate(180deg);
        }
      }
    }
    .login-sub-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30px;

      .title-text {
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 16px;
        color: #9ca6b1;
      }
      .sub-link {
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        color: #2776ff;
        cursor: pointer;
        line-height: 20px;
        padding-right: 20px;
        background: url(@/assets/icon-links.png) no-repeat right center;
      }
    }
    .login-tab {
      width: 440px;
      height: 56px;
      background-image: linear-gradient(180deg, #ffffff33 0%, #ffffff 100%);
      border-radius: 20px 20px 0 0;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      position: relative;
      z-index: 2;

      .tab-item {
        width: 195px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 18px;
        color: #8c8c8c;
        cursor: pointer;
        &.cur {
          width: 245px;
          height: 68px;
          background: #ffffff;
          border-radius: 16px 16px 0 0;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 20px;
          color: #111a34;
        }
      }
    }
    .login-wechat {
      width: 440px;
      height: 432px;
      background: #ffffff;
      box-shadow: 0 2px 10px 0 #1447ff1a;
      border-radius: 0 0 16px 16px;
      padding: 20px;
      box-sizing: border-box;
      margin-top: -1px;
      z-index: 1;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      .wechat-code {
        width: 360px;
        height: 360px;
        display: flex;
        justify-content: center;
      }
    }
    .login-form {
      width: 440px;
      position: relative;
      margin-top: -1px;
      z-index: 1;
      height: 432px;
      background: #ffffff;
      box-shadow: 0 2px 10px 0 #1447ff1a;
      border-radius: 0 0 16px 16px;
      padding: 20px;
      box-sizing: border-box;
      .flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .code-box {
          width: 122px;
          height: 60px;
          background: #f7f7f7;
          border-radius: 12px;
          margin-left: 16px;
          vertical-align: middle;
          cursor: pointer;
          margin-bottom: 30px;
        }
        .code {
          width: 122px;
          height: 60px;
          background: #f7f7f7;
          border-radius: 12px;
        }
      }
      .form-item {
        height: 60px;
        width: 100%;
        box-sizing: border-box;
        background: #ffffff;
        border: 1px solid #bec4ca;
        border-radius: 12px;
        margin-bottom: 30px;
        padding: 15px 16px;

        /deep/ .ant-form-item-row {
          width: 100%;
        }
        /deep/.ant-form-item-control-input-content {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 16px;
        }
        .form-icon {
          width: 30px;
          height: 30px;
          margin-right: 16px;
        }
      }
      .form-xiyi {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 20px;
        padding-bottom: 12px;
        box-sizing: border-box;
        .xiyi-left {
          display: flex;
          align-items: center;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 14px;
          color: #595959;
          line-height: 20px;
          .link {
            font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 14px;
            color: #2776ff;
            line-height: 20px;
            text-decoration: underline;
          }
        }
        .xiyi-right {
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 14px;
          color: #2776ff;
          line-height: 20px;
          cursor: pointer;
        }
      }
      .form-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 18px;
        color: #ffffff;
        cursor: pointer;
        height: 60px;
        background: #2776ff;
        border-radius: 12px;
        width: 100%;
      }
    }
    .copyright {
      padding-top: 44px;
      .text {
        line-height: 16px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 12px;
        color: #9ca6b1;
        text-align: center;
      }
    }
  }
}

.login-tip-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  .tip-title {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 16px;
    color: #262626;
    line-height: 26px;
    margin-bottom: 4px;
  }
  .tip-desc {
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 14px;
    color: #8c8c8c;
    line-height: 26px;
  }
  .tip-text {
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 16px;
    color: #595959;
    line-height: 26px;
    margin-bottom: 40px;
  }
}
.forget-form {
  padding: 70px 75px 0;
  .form-item {
    margin-bottom: 30px;
    height: 60px;
  }
  .form-btn {
    margin-top: 130px;
    width: 100%;
    width: 400px;
    height: 60px;
    background: #2776ff;
    border-radius: 12px;
    color: #fff;
  }
}
</style>
